<template>
	<view class="container">

		<view class="top-box">
			<image :src="topImage" class="bg"></image>
			<view class="top-content">
				<view class="top-title" @click="navTo()">
					乐至劳动镇民生服务智慧平台
				</view>
				<view class="top-search">
					<view class="top-location">
						<uni-icons type="location-filled" color="#ffffff" size="20"></uni-icons>
						<view>
							<easy-select ref="selectCommunity" size="mini" :value="areaName" :options="communityList" @selectOne="handleCommunityChange"></easy-select>
						</view>
					</view>
				<!-- 				<view class="search-input-box">
						<uni-easy-input placeholder="请输入关键字搜索" prefixIcon="search" :inputBorder="false"
							placeholderStyle="color:white" v-model="inputTitle"></uni-easy-input>
					</view> -->
				</view>
				<view class="top-notice">
					<uni-notice-bar showIcon="true" scrollable="true" :speed="50" single="true" :text="noticeText" color='#fff'>
					</uni-notice-bar>
				</view>

			</view>
		</view>
		<view class="info-box">
			<view class="first-container">
				<view class="title-box">
					便民服务
				</view>
				<view class="first-box">
					<view class="item-box" v-for="(item,index) in firstBoxList" :key="index" @click="goPage(item.path,item.checked)">
						<view class="item-image">
							<image :src="item.icon" mode="aspectFit"></image>
						</view>
						<view class="item-text">{{item.title}}</view>
					</view>
				</view>

				<view class="second-box">
					<view class="item-box" v-for="(item,index) in secondBoxList" :key="index" @click="goPage(item.path,item.checked)">
						<view class="item-image">
							<text class="iconfont" :class="item.icon" style="font-size: 120upx;color:#3E9CF9"></text>
						</view>
						<view class="item-text">{{item.title}}</view>
					</view>
				</view>
			</view>

			<view class="second-container">
				<view class="title-box">
					信息公开
				</view>
				<view class="second-box">
					<view class="item-box" v-for="(item,index) in thirdBoxList" :key="index" @click="goPage(item.path,item.checked)">
						<view class="item-image">
							<text class="iconfont" :class="item.icon" style="font-size: 100upx;color:#3E9CF9"></text>
						</view>
						<view class="item-text">{{item.title}}</view>
					</view>
				</view>
			</view>

			<view class="third-container" v-if="newsList.length != 0">
				<view class="title-box">
					乡村公告
				</view>
				<view v-for="(news,index) in newsList" :key="index" style="display: flex;flex-direction: row;padding:10upx 20upx;"
				 @click="navContent(news)">
					<view style="width: calc(100% - 210upx);padding-left:30upx">
						<view class="activity_title">
							{{news.title}}
						</view>
						<view class="activity_count">
							<view style="float:left">{{news.publishTime}}</view>
						</view>
					</view>
					<view style="height:220upx">
						<view style="height:190upx;width:240upx">
							<image :src="news.coverImageUrl || noPhoto" style="width: 100%;height:100%;border-radius: 10upx;"></image>
						</view>
					</view>

				</view>
			</view>
			<view style="height: 140upx;"></view>
		</view>
		<wx-tabbar></wx-tabbar>

	</view>
</template>

<script>
	import easySelect from '@/components/easy-select/easy-select.vue'
	import uniEasyInput from '@/components/uni-easyinput/uni-easyinput.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	import wxTabbar from '@/components/wx-tabbar/wx-tabbar.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				player: "",
				topImage: 'https://cdjjyl.com.cn/images/index/indexTopBg.png',
				areaCode: "2021030891230011",
				areaName: "",
				communityTitle: "乐至劳动镇民生服务智慧平台",
				communityList: [],
				inputTitle: "",
				placeholderStyle: "color:white;font-size:20upx",
				noticeText: "通知：乡村已开通便民服务，请前往乡村进行登记！",
				noPhoto: "https://cdjjyl.com.cn/images/noPhoto.png",
				newsList: [],
				firstBoxList: [{
						"icon": "/static/image/index/zwsb.png",
						"title": "政务申报",
						"path": "/package_biz/pages/declare/declareIndex",
						"checked": "OWNER"
					}, {
						"icon": "/static/image/index/sjsb.png",
						"title": "事件上报",
						"path": "/package_biz/pages/report/reportlist",
						"checked": "LOGIN"
					},
					// {
					// 	"icon": "/static/image/index/sqsq.png",
					// 	"title": "乡村商圈",
					// 	"path": "/pages/index/store_index",
					// 	"checked": "LOGIN"
					// }
					{
						"icon": "/static/image/index/sqsq.png",
						"title": "疫情防控",
						"path": "/package_isp/pages/epidemic/controlEpidemic",
						"checked": "LOGIN"
					}, {
						"icon": "/static/image/index/rrt.png",
						"title": "人人通电视",
						"path": "/pages/index/videoHome",
						"checked": "NONE"
					}
				],
				secondBoxList: [{
						"icon": "icon-bszn",
						"title": "办事指南",
						"path": "/package_biz/pages/smartaffairs/affairlist",
						"checked": "LOGIN"
					},
					{
						"icon": "icon-tousujianyi",
						"title": "投诉建议",
						"path": "/package_biz/pages/suggestions/suggestions",
						"checked": "LOGIN"
					}, {
						"icon": "icon-arrow-left-top",
						"title": "就业创业",
						"path": "/package_isp/pages/employment/employment",
						"checked": "LOGIN"
					}, {
						"icon": "icon-dangjianfuwu",
						"title": "党建服务",
						"path": "/package_isp/pages/party/partyBuild",
						"checked": "LOGIN"
					}, {
						"icon": "icon-guanyushequ",
						"title": "我的乡村",
						"path": "/package_biz/pages/about/about_community",
						"checked": "NONE"
					},
					{
						"icon": "icon-rmt",
						"title": "乐至融媒体",
						// "path": "https://m.lzxrmtzx.com/index.html",
						"path": "/package_isp/pages/media/mediaList",
						"checked": "LOGIN"
					},
					// {
					// 	"icon": "icon-sbjf",
					// 	"title": "社保缴费",
					// 	"path": "https://sichuan.chinatax.gov.cn/index.html",
					// 	// "path": "/package_biz/pages/about/about_community",
					// 	"checked": "URL"
					// },
					{
						"icon": "icon-sbcx",
						"title": "社保查询",
						"path": "http://srsj.ziyang.gov.cn/wx/index.html?v=0513#reloaded",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					{
						"icon": "icon-hmt",
						"title": "号码百事通",
						"path": "http://rmh5.lzxrmtzx.com/dhhy/#/index",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					{
						"icon": "icon-jtcx",
						"title": "交通违章查询",
						"path": "https://mp.weixin.qq.com/cityservice/servicehome?id=1000821&cityid=510100&uin=&key=&scene=1&lang=zh_CN&devicetype=Windows+10+x64&version=6302019c&fontgear=2",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					{
						"icon": "icon-yygh",
						"title": "挂号就诊",
						"path": "http://his.mobimedical.cn/index.php?g=Wap&m=CloudIndex&a=index&wx=MbTXIN5k&wxuserid=129&state=",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					{
						"icon": "icon-qcp",
						"title": "汽车票务",
						"path": "https://www.scqckypw.com/query/searchTicket.html?cityId=361&cityName=%E4%B9%90%E8%87%B3%E5%8E%BF&targetName=%E6%88%90%E9%83%BD%E5%B8%82&searchDate=2021-06-26",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					{
						"icon": "icon-rqjf",
						"title": "燃气服务",
						"path": "https://weixin.towngasvcc.com/vcc-wx/gasAirlines/gasServiceBak?wx_appid=wxf4cf6c2077c19200",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					{
						"icon": "icon-dzzh",
						"title": "地质灾害",
						"path": "https://topic.scol.com.cn/2017/17dzzhcx/pc/",
						// "path": "/package_biz/pages/about/about_community",
						"checked": "URL"
					},
					// {
					// 	"icon": "icon-zaihaibaojing",
					// 	"title": "灾害报警",
					// 	"path": "/package_isp/pages/alarm/addAlarm",
					// 	"checked": "LOGIN"
					// },
					// {
					// 	"icon": "icon-wmly",
					// 	"title": "文明随手拍",
					// 	"path": "https://m.chaojibiaodan.com/form/Sq2h0TML?from=singlemessage",
					// 	// "path": "/package_biz/pages/about/about_community",
					// 	"checked": "URL"
					// },


				],
				thirdBoxList: [{
						"icon": "icon-zhengwugongkai",
						"title": "政策公示",
						"path": "/package_biz/pages/content/index",
						"checked": "LOGIN"
					}, {
						"icon": "icon-junrendongtai",
						"title": "民兵动态",
						"path": "/package_isp/pages/militiaManage/militiaManage",
						"checked": "LOGIN"
					}, {
						"icon": "icon-sanwugongkai",
						"title": "三务公开",
						"path": "/package_isp/pages/threeAffairs/threeAffairs",
						"checked": "LOGIN"
					}, {
						"icon": "icon-gonghuixinxi",
						"title": "工会信息",
						"path": "/package_isp/pages/unionInfo/unionInfo",
						"checked": "LOGIN"
					}, {
						"icon": "icon-funvxinxi",
						"title": "妇联信息",
						"path": "/package_isp/pages/womenInfo/womenInfo",
						"checked": "LOGIN"
					},
					{
						"icon": "icon-zhifadongtai",
						"title": "执法动态",
						"path": "/pages/public/infoList?tagType=ENFORCEMENT&tagName=执法动态",
						"checked": "LOGIN"
					},
					{
						"icon": "icon-quanbugongneng",
						"title": "全部功能",
						"path": "/pages/index/functions",
						"checked": "NONE"
					}
				],
			}
		},

		onLoad() {
			this.getAllCommunityInfo();
			this.getNoticeByAreaCode();
		},
		onShow(option) {
			this.communityList.forEach((item, key) => {
				console.log('this.communityList：item--' + item.communityCode)
			})
			uni.hideTabBar()
			// 从分包界面返回到首页需要重新设置tabbar的index值
			this.changeTabBar({
				index: 0
			})
		},

		methods: {
			...mapMutations(['changeTabBar']),

			getNoticeByAreaCode() {
				let params = {
					areaCode: this.areaCode
				}
				this.$api.request.getNoticeByAreaCode(params, (res) => {
					if (res.body.status.statusCode == '0') {
						if (res.body.data.entity) {
							this.noticeText = res.body.data.entity.title
						}
					}
				})
			},
			handleCommunityChange(options) {
				console.log('options' + options.areaCode)
				this.areaName = options.areaName
				this.areaCode = options.areaCode
				uni.setStorageSync('bindCommunityInfo', options)
				this.setIndexInfo()
				this.inquiryArticle()
			},
			setIndexInfo() {
				let communityInfo = uni.getStorageSync('bindCommunityInfo');
				console.dir(communityInfo)
				if (communityInfo) {
					this.areaCode = communityInfo.areaCode
					this.areaName = communityInfo.areaName
					if (communityInfo.appletTitle != null & communityInfo.appletTitle != '') {
						this.communityTitle = communityInfo.appletTitle
					}
				} else {
					this.areaCode = this.defaultCommunityId
					this.areaName = "默认小区"
				}
				this.areaCode = '2021030891230011'
				wx.setNavigationBarTitle({
					title: this.communityTitle
				})
			},
			getAllCommunityInfo() {
				let params = {
					areaCode: this.$api.request.communityCode,
					areaLevel: 14
				}
				this.$api.request.getCommunityByAreaCode(params, (res) => {
					console.log(res.body.status)
					if (res.body.status.statusCode == '0') {
						let communityList = res.body.data.list;
						if (communityList && communityList.length > 0) {
							// 缓存所有乡村
							this.communityList = communityList;
							uni.setStorageSync("communityList", communityList)
							// 缓存当前乡村
							let communityInfo = uni.getStorageSync("bindCommunityInfo");
							console.log('communityInfo___' + communityInfo)
							if (!communityInfo) {
								uni.setStorageSync("bindCommunityInfo", communityList[0])
							}
							this.setIndexInfo()
							this.inquiryArticle()
						}
					}
				})
			},
			navContent(item) {

				let decodeItem = encodeURIComponent(JSON.stringify(item));
				if (item.linkType === '自定义内容') {
					uni.navigateTo({
						url: '/package_biz/pages/content/richText?item=' + decodeItem
					})
				} else if (item.linkType === '外部链接') {
					uni.navigateTo({
						url: '/package_biz/pages/content/webView?src=' + item.content
					})
				}
			},
			// 不校验登录跳转
			goPage(url, checked) {
				if (url == "" || url == undefined || url == null) {
					this.$api.msg("该功能暂未开放")
				}
				if ("NONE" == checked) {
					if (url == "/pages/index/functions") {
						this.changeTabBar({
							index: 1
						})
						uni.switchTab({
							url: url
						})
					} else {
						uni.navigateTo({
							url: url
						})
					}

				} else if ("LOGIN" == checked) {
					this.$api.sysauth.checkLogin(url);
				} else if ("OWNER" == checked) {
					this.$api.sysauth.checkLoginAndBindCommunity(url);
				} else if ("URL" == checked) {
					window.location.href = url
				}

			},
			navTo() {
				// uni.navigateTo({
				// 	url: "/pages/index/video-test"
				// })
				// window.open('https://m.lzxrmtzx.com/index.html')
			},
			inquiryArticle() {
				let that = this;
				this.$api.request.inquiryArticle({
					areaCode: this.areaCode,
					articleType: this.$constant.ARTICLE_TYPE_NEWS
				}, function(res) {
					if (res.body.status.statusCode === '0') {
						var articleList = res.body.data.articles;
						that.newsList = [];
						for (var i = 0; i < articleList.length; i++) {
							if (articleList[i].articleType == 5) {
								that.newsList.push(articleList[i]);
							}
						}
						if (that.newsList.length > 3) {
							that.newsList = that.newsList.slice(0, 3);
						}
					}
				}, true)
			},
		},
		computed: {
			...mapState(['defaultCommunityId']),
		},
		components: {
			easySelect,
			uniEasyInput,
			uniNoticeBar,
			wxTabbar
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
	}

	.container {
		width: 100%;
		height: 100%;
	}


	.top-box {
		width: 100%;
		height: 500upx;
		position: relative;
		overflow: hidden;

		.bg {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			width: 100%;
		}

		.top-content {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 100;
			width: 100%;
		}

		.top-title {
			margin-top: 100upx;
			z-index: 100;
			padding-left: 30upx;
			font-size: 32upx;
			font-weight: bolder;
			color: white;
		}

		.top-search {
			width: 100%;
			margin-top: 30upx;
			display: flex;
			flex-direction: row;

			.top-location {
				height: 60upx;
				width: 40%;
				line-height: 60upx;
				padding: 0 30upx;
				display: flex;
				flex-direction: row;
			}

			.search-input-box {
				width: calc(60% - 80upx);
				margin-left: 40upx;

				.search-input {
					background-color: #E9E9E9;
					width: 100%;
					height: 100%;
					box-sizing: border-box;
					line-height: 50upx;
					border-radius: 50upx;
					font-size: 24upx;
					transition: all .5s;
					padding: 10upx 30upx 10upx 90upx;
				}

				.search-input-p {
					color: #999;
					width: 100%;
					height: 100%;
					padding: 0 !important;
				}

				.search-input-p-c {
					position: relative;
					top: 50%;
					transform: translateY(-50%);
				}

			}
		}
	}

	.info-box {
		width: calc(100% - 60upx);
		margin: 20upx 30upx 0upx 30upx;
		position: absolute;
		top: 300upx;
		z-index: 80;

		.first-container {
			width: 100%;
			background-color: white;
			border-radius: 20upx;
			padding-bottom: 10upx;

			.title-box {
				padding-top: 10upx;
				padding-left: 30upx;
				height: 80upx;
				line-height: 80upx;
				font-weight: bolder;
				font-size: 28upx;
			}

			.first-box {
				padding: 20upx 30upx;
				display: flex;
				flex-direction: row;
				justify-content: space-around;


				.item-box {
					width: 25%;
					text-align: center;

					.item-image {
						width: 100%;

						image {
							width: 120upx;
							height: 120upx;
						}
					}

					.item-text {
						width: 100%;
						text-align: center;
						font-size: 24upx;
						font-weight: bold;
					}
				}

			}

			.second-box {
				padding: 0 20upx 20upx 20upx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				border-radius: 20upx;

				.item-box {
					margin: 10rpx 0 20rpx 0;
					width: 25%;
					text-align: center;

					.item-image {
						width: 100%;

						image {
							width: 100upx;
							height: 100upx;
						}
					}

					.item-text {
						width: 100%;
						text-align: center;
						font-size: 22upx;
					}
				}
			}
		}


		.second-container {
			margin-top: 30upx;
			width: 100%;
			background-color: white;
			border-radius: 20upx;
			padding-bottom: 10upx;

			.title-box {
				padding-top: 10upx;
				padding-left: 30upx;
				height: 80upx;
				line-height: 80upx;
				font-weight: bolder;
				font-size: 30upx;
			}

			.second-box {
				padding: 0 20upx 20upx 20upx;
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				border-radius: 20upx;

				.item-box {
					margin: 10rpx 0 20rpx 0;
					width: 25%;
					text-align: center;

					.item-image {
						width: 100%;

						image {
							width: 100upx;
							height: 100upx;
						}
					}

					.item-text {
						width: 100%;
						text-align: center;
						font-size: 22upx;
					}
				}
			}
		}


		.third-container {
			margin-top: 30upx;
			width: 100%;
			background-color: white;
			border-radius: 20upx;
			padding-bottom: 10upx;

			.title-box {
				padding-top: 10upx;
				padding-left: 30upx;
				height: 80upx;
				line-height: 80upx;
				font-weight: bolder;
				font-size: 30upx;
			}
		}
	}

	.activity_title {
		font-weight: bold;
		margin-top: 10upx;
		font-size: 24upx;
		line-height: 40upx;
		margin-bottom: 20upx;
		height: 120upx;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.activity_count {
		height: 40upx;
		color: #929292;
		line-height: 40upx;
		font-size: 20upx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
	}

	.easy-select {
		border: none !important;
		color: white !important;
		width: 240upx !important;

		.active {
			background-color: #69BEFF !important;
		}
	}

	.easy-select-options {
		background-color: #FFFFFF !important;
		border: #1786FF !important;
		box-shadow: 0px 0px 20px #909090 !important;
	}

	.easy-select-options-item {
		color: rgba(0, 0, 0, 0.5) !important;
		font-size: 24upx !important;
		height: 60upx !important;
		line-height: 60upx !important;
	}

	.uni-easyinput__content {
		background-color: #39B9F8 !important;
		width: 100% !important;
		border-radius: 60upx !important;
		height: 60upx !important;
		min-height: 60upx !important;
	}

	.content-clear-icon {
		padding: 0 20upx !important;
	}

	.uni-easyinput__content-input {
		font-size: 22upx !important;
		color: white !important;
	}

	.uni-icons {
		color: white !important;
		font-size: 30upx !important;
	}

	.uni-noticebar__content-text {
		color: white !important;
	}

	.uni-noticebar {
		padding: 30upx 80upx !important;
		background-color: transparent !important;
	}

	.uni-noticebar__content-text {
		font-size: 24upx !important;
	}
</style>
